// 公共前缀
@prefix: t;

// 颜色色板

@primary-color-1: #DFEFFF;
@primary-color-2: #BFDBF7;
@primary-color-3: #9BC5F2;
@primary-color-4: #7BAFED;
@primary-color-5: #5C99EB;
@primary-color-6: #3881E8;
@primary-color-7: #206AE1;
@primary-color-8: #0052D9;
@primary-color-9: #003CBE;
@primary-color-10: #0026A1;

@warning-color-1: #FFEFDB;
@warning-color-2: #FFD3A3;
@warning-color-3: #FFB473;
@warning-color-4: #FF9247;
@warning-color-5: #ED7B2F;
@warning-color-6: #D6621C;
@warning-color-7: #C24C08;
@warning-color-8: #A23C00;
@warning-color-9: #872D00;
@warning-color-10: #691F00;

@error-color-1: #FFE9E9;
@error-color-2: #FFCCCE;
@error-color-3: #FFACAF;
@error-color-4: #FF888C;
@error-color-5: #FB646D;
@error-color-6: #E34D59;
@error-color-7: #C93043;
@error-color-8: #B01531;
@error-color-9: #960022;
@error-color-10: #730021;

@success-color-1: #DFF7ED;
@success-color-2: #A9E8CD;
@success-color-3: #69D5AB;
@success-color-4: #30BF8B;
@success-color-5: #00A870;
@success-color-6: #00935D;
@success-color-7: #007E4A;
@success-color-8: #006937;
@success-color-9: #005426;
@success-color-10: #004114;

@gray-color-1: #F3F3F3;
@gray-color-2: #EEEEEE;
@gray-color-3: #E7E7E7;
@gray-color-4: #DCDCDC;
@gray-color-5: #C5C5C5;
@gray-color-6: #A6A6A6;
@gray-color-7: #8B8B8B;
@gray-color-8: #777777;
@gray-color-9: #5E5E5E;
@gray-color-10: #4B4B4B;
@gray-color-11: #383838;
@gray-color-12: #2C2C2C;
@gray-color-13: #242424;
@gray-color-14: #181818;

// 基础颜色
@primary-color: @primary-color-8; // 色彩-品牌-可操作
@warning-color: @warning-color-5; // 色彩-功能-警告
@error-color: @error-color-6; // 色彩-功能-失败
@success-color: @success-color-5; // 色彩-功能-成功

// 基础颜色的扩展 用于 hover / 禁用 / 点击 等状态

// 主题色扩展
@primary-color-active: @primary-color-9;
@primary-color-disabled: @primary-color-2;

// 警告色扩展
@warning-color-active: @warning-color-6;
@warning-color-disabled: @warning-color-2;

// 失败/错误色扩展
@error-color-active: @error-color-7;
@error-color-disabled: @error-color-2;

// 成功色扩展
@success-color-active: @success-color-6;
@success-color-disabled: @success-color-2;
// 遮罩
@mask-active: rgba(0, 0, 0, .6); // 遮罩-弹出
@mask-disabled: rgba(255, 255, 255, .6); // 遮罩-禁用

// 背景色
@bg-color: #fbfbfb; // 色彩-背景
@bg-color-fade: #fbfbfb; // 色彩-中层背景
@bg-color-active: #f5f5f5; // 色彩-hover / click 背景 / 搜索输入框
@bg-color-disabled: #ffffff; // 色彩-disabled
@bg-color-block: #fff; // 色彩-模块

@bg-color-icon-fade: #cccccc;
@bg-color-icon-dark: #444444;

// 文本颜色
@text-level-1-color: rgba(0, 0, 0, .9); // 色彩-文字-一级
@text-level-2-color: rgba(0, 0, 0, .6); // 色彩-文字-二级
@text-level-3-color: rgba(0, 0, 0, .4); // 色彩-文字-三级
@text-level-4-color: rgba(0, 0, 0, .26); // 色彩-文字-四级
@text-color-disabled: @text-level-4-color; // 文字禁用色
@text-anti-primary-color: rgba(255, 255, 255, .9); // 色彩-文字-主色反色
@text-primary-color: @text-level-1-color;      // 色彩-文字-主要

@placeholder-color: @text-level-3-color;

// 背景色
@bg-color-page: @gray-color-2;                        // 色彩 - page
@bg-color-container: #fff;                          // 色彩 - 容器
@bg-color-container-active: @gray-color-3;            // 色彩 - 容器 - active

@bg-color-secondarycontainer: @gray-color-1;          // 色彩 - 次级容器
@bg-color-secondarycontainer-active: @gray-color-4;   // 色彩 - 次级容器 - active

@bg-color-component: @gray-color-3;                   // 色彩  - 组件
@bg-color-component-active: @gray-color-6;            // 色彩 - 组件 - active
@bg-color-component-disabled: @gray-color-1;          // 色彩 - 组件 - disabled

// 边框色
@border-level-1-color: #E6E6E6;
@border-level-2-color: #DDDDDD;

// Spacer
@spacer: 4px;
@spacer-1: @spacer; // 间距-小-x
@spacer-2: @spacer * 2; // 间距-小
@spacer-3: @spacer * 3; // 间距-中
@spacer-4: @spacer * 4; // 间距-大
@spacer-5: @spacer * 6; // 间距-大-x
@spacer-6: @spacer * 10; // 间距-大-xx

// Font
@font-size: 10px;
@font-size-xs: @font-size; // 字号-一级字号
@font-size-s: @font-size * 1.2; // 字号-二级字号
@font-size-base: @font-size * 1.4; // 字号-三级字号
@font-size-l: @font-size * 1.6; // 字号-四级字号
@font-size-xl: @font-size * 1.8; // 字号-五级字号

@text-line-height: 1.5; //

@font-family: PingFang SC, Microsoft YaHei, Arial Regular; // 字体-磅数-常规
@font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium; // 字体-磅数-粗体

// Border Radius
@border-radius: 4px; // 圆角-全局
@border-radius-50: 50%; // 圆角-全圆角

// 表单相关
@form-height: 30px;
@form-text-color: @text-level-1-color;
@form-bg-color: @bg-color-block;
@form-border-color: @border-level-2-color;

// shadow
@shadow-1: 1px 1px 5px 1px rgba(0, 0, 0, .03);
@shadow-2: 3px 3px 8px 2px rgba(0, 0, 0, .06);

// 图标尺寸
@icon-x: 16px;
@icon-default: 24px;

// 暗色模式
@dark-bg-color: #272B30; // 色彩-深色背景
